<template>
  <div class="search-container">
    <div class="search-content">
      <div class="filter-section">
        <div class="filter-card">
          <h3 class="filter-title">房源筛选</h3>
          <el-select 
            v-model="form.city" 
            placeholder="请选择城市" 
            class="filter-input"
            size="medium"
          >
            <el-option label="北京" value="北京"></el-option>
            <el-option label="上海" value="上海"></el-option>
            <el-option label="广州" value="广州"></el-option>
          </el-select>
          
          <el-select 
            v-model="form.type" 
            placeholder="请选择类型" 
            class="filter-input"
            size="medium"
          >
            <el-option label="整租" value="whole"></el-option>
            <el-option label="合租" value="share"></el-option>
          </el-select>
          
          <el-input 
            placeholder="请输入小区名称" 
            prefix-icon="el-icon-search" 
            v-model="form.name" 
            class="filter-input"
            size="medium"
          ></el-input>
          
          <div class="range-section">
            <div class="range-title">价格范围 (元/月)</div>
            <el-slider 
              v-model="form.price" 
              range 
              :max="10000" 
              :marks="marks1" 
              class="range-slider"
            ></el-slider>
          </div>
          
          <div class="range-section">
            <div class="range-title">面积范围 (㎡)</div>
            <el-slider 
              v-model="form.area" 
              range 
              :max="200" 
              :marks="marks2" 
              class="range-slider"
            ></el-slider>
          </div>
          
          <el-button 
            type="primary" 
            @click="searchHouse" 
            class="search-btn"
            size="medium"
          >
            <i class="el-icon-search"></i> 搜索房源
          </el-button>
        </div>
      </div>
      
      <div class="results-section">
        <div class="house-list">
          <transition-group name="fade" tag="div" class="list-container">
            <div class="house-item" v-for="item in list" :key="item.id">
              <houseItem :item="item" />
            </div>
          </transition-group>
        </div>
        
        <div class="pagination-wrapper">
          <el-pagination 
            @current-change="handlePage" 
            :current-page.sync="currentPage" 
            :page-size="6"
            layout="prev, pager, next" 
            :total="allList.length"
            background
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import houseItem from '@/components/houseItem.vue'
export default {
  name: 'Renttype',
  components: {
    houseItem
  },
  created() {
    if (!this.$route.query.nav) {
      this.getHouseInfo()
    }
  },
  data() {
    return {
      form: {
        city: '',
        type: '',
        name: '',
        price: [0, 2500],
        area: [0, 100],
      },
      marks1: {
        0: '0',
        2500: '2500',
        5000: '5000',
        7500: '7500',
        10000: '10000',
      },
      marks2: {
        0: '0',
        50: '50',
        100: '100',
        150: '150',
        200: '200',
      },
      currentPage: 1,
      msg: {
        title: '',
        city: '',
        rentType: '',
        minPrice: '0',
        maxPrice: '999999',
        minArea: '0',
        maxArea: '999'
      },
      list: [],
      allList: []
    }
  },
  watch: {
    '$route.query.type': {
      handler(newType) {
        this.msg.rentType = newType
        this.form.type = newType 
        if (this.$route.query.nav) {
          this.getHouseInfo()
        }
      },
      immediate: true
    },
  },
  methods: {
    handlePage(page) {
      const start = (page - 1) * 6
      const end = page * 6
      this.list = this.allList.slice(start, end)
      // 平滑滚动到顶部
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    },
    async getHouseInfo() {
      this.msg.city = this.$route.query.city || ''
      this.msg.title = this.$route.query.title || ''
      this.msg.rentType = this.$route.query.type || ''
      this.msg.maxPrice = this.$route.query.range || '999999'
      const { data: res } = await this.$axios.post('/api/house/search', this.msg)
      if (res.status === 200) {
        this.allList = res.data
        this.list = this.allList.slice(0, 6)
      }
    },
    async searchHouse() {
      this.msg.title = this.form.name
      this.msg.rentType = this.form.type
      this.msg.city = this.form.city
      this.msg.minPrice = this.form.price[0]
      this.msg.maxPrice = this.form.price[1]
      this.msg.minArea = this.form.area[0]
      this.msg.maxArea = this.form.area[1]
      const { data: res } = await this.$axios.post('/api/house/search', this.msg)
      if (res.status === 200) {
        this.allList = res.data
        this.list = this.allList.slice(0, 6)
        this.currentPage = 1
      }
    }
  },
}
</script>

<style scoped>
/* 基础样式 */
.search-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.search-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 筛选区域 */
.filter-section {
  width: 100%;
}

.filter-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.filter-title {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #333;
  font-weight: 600;
}

.filter-input {
  width: 100%;
  margin-bottom: 20px;
}

.range-section {
  margin-bottom: 25px;
}

.range-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.range-slider {
  width: 100%;
  padding: 0 10px;
}

.search-btn {
  width: 100%;
  margin-top: 10px;
  background: linear-gradient(90deg, #409EFF, #66b1ff);
  border: none;
  font-weight: 500;
  letter-spacing: 1px;
}

/* 结果区域 */
.results-section {
  flex: 1;
}

.house-list {
  margin-bottom: 20px;
}

.list-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.house-item {
  transition: all 0.3s ease;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

/* 分页 */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

/* 响应式设计 */
@media (min-width: 992px) {
  .search-content {
    flex-direction: row;
  }
  
  .filter-section {
    width: 350px;
    flex-shrink: 0;
  }
  
  .results-section {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .list-container {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  
  .filter-card {
    padding: 15px;
  }
}

@media (max-width: 576px) {
  .search-container {
    padding: 10px;
  }
  
  .list-container {
    grid-template-columns: 1fr;
  }
}
</style>